<template>
  <div class="display-panel">
    <el-form v-bind="props.formConfig" :model="props.formData" class="form">
      <div class="draggable-box">
        <VueDraggable
          class="draggable-box-content"
          :disabled="props.disabled"
          @add="handleAdd"
          :group="DraggableGroup"
          :animation="300"
          ghostClass="ghost"
          v-model="props.formConfig.schemas"
          :clone="deepClone"
        >
          <base-empty
            emptyText="请从左侧选择控件添加"
            v-if="!props.formConfig.schemas.length"
          />
          <template v-for="schema in props.formConfig.schemas" :key="schema.id">
            <DisplayItem
              :disabled="props.disabled"
              :formData="props.formData"
              :IDMap="props.IDMap"
              :schema="schema"
              :currentItem="props.currentItem"
              @setCurrentItem="setCurrentItem"
              @deleteCurrentItem="deleteCurrentItem"
              @changeFormItemData="changeFormItemData"
            />
          </template>
        </VueDraggable>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElForm } from "element-plus";
import BaseEmpty from "../base/base-empty.vue";
import { VueDraggable } from "vue-draggable-plus";
import DisplayItem from "./display-item.vue";
import { DraggableGroup, deepClone } from "../../uitls";
import { PropType } from "vue";
import {
  DraggableTreeNode,
  FormConfig,
  FormDataType,
  IDMapType,
} from "../../type";
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  formConfig: {
    type: Object as PropType<FormConfig>,
    default: () => {
      return {
        schemas: [],
      };
    },
  },
  formData: {
    type: Object as PropType<FormDataType>,
    default: () => {
      return {};
    },
  },
  IDMap: {
    type: Object as PropType<IDMapType>,
    default: () => {
      return {};
    },
  },
  currentItem: {
    type: Object as PropType<DraggableTreeNode | null>,
    default: null,
  },
});
function handleAdd(e: any) {
  console.log("暂未开发");
  console.log(e);
}
const emit = defineEmits([
  "changeFormItemData",
  "setCurrentItem",
  "deleteCurrentItem",
]);
function changeFormItemData(e: any) {
  emit("changeFormItemData", e);
}
// 点击事件：点击组件设置为当前组件
function setCurrentItem(schema: DraggableTreeNode) {
  emit("setCurrentItem", schema);
}
// 删除事件
function deleteCurrentItem(schema: DraggableTreeNode) {
  emit("deleteCurrentItem", schema);
}
</script>

<style lang="scss" scoped>
.display-panel {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: start;
  .form {
    width: 100%;
    .draggable-box {
      position: relative;
      padding: 10px 0;
      height: 100%;
      .draggable-box-content {
        height: 100%;
      }
      .schema-module {
        border-bottom: 1px #b44848 solid;
      }
    }
  }
}
</style>
